var imgset = 0;
var vidoeset = 0;
var page = 0;
//记录历史总页数，出现过的总数量
var sum = 0;
//记录当前总页数，即删除后还余下的数量
var pptCount = 0;
//ppt页计数器
var current_id = 0;
//记录各页图片数量
var imgCount = new Array();
//记录各页文本数量
var textCount = new Array();
//记录各页视频框数量
var videoBoxCount = new Array();
//记录各页视频数量
var videoCount = new Array();
//记录ppt页是否被删除
var is_exist = new Array();

var t = 2;
var articleId;
var art_title;


window.onload = function () {
    $("#button_pptCreation").click(function () {
        //历史ppt页计数器+1
        sum++;
        //当前ppt页计数器+1
        pptCount++;
        var num = pptCount;
        var pptId = 'ppt' + pptCount;

        //******************第五部分 添加新页功能******************\\
        ////ppt页设置id，为pptId为当前ppt页数
        var newPpt = '<li id="' + pptId + '"><a href="javascript:" ><span class="hidden-xs glyphicon glyphicon-pencil"></span><div class="pull-right visible-lg text-center">第' + pptCount + '页</div></a></li>';
        $("#menu").append(newPpt);
        var content = '<div class="box draggable box0" id="box0"><a href="javascript:" class="img-remove">x</a><span class="r"></span><span class="l"></span><span class="t"></span><span class="b"></span><span class="br"></span><span class="bl"></span><span class="tl"></span><img class="imgi" id="imgid"></div><div class="box draggable box0"><a href="javascript:" class="img-remove">x</a><span class="r"></span><span class="l"></span><span class="t"></span><span class="b"></span><span class="br"></span><span class="bl"></span><span class="tl"></span><img class="imgi"></div><div class="box draggable box0"><a href="javascript:" class="img-remove">x</a><span class="r"></span><span class="l"></span><span class="t"></span><span class="b"></span><span class="br"></span><span class="bl"></span><span class="tl"></span><img class="imgi"></div><div class="box draggable box0"><a href="javascript:" class="img-remove">x</a><span class="r"></span><span class="l"></span><span class="t"></span><span class="b"></span><span class="br"></span><span class="bl"></span><span class="tl"></span><img class="imgi"></div><div class="box draggable box0"><a href="javascript:" class="img-remove">x</a><span class="r"></span><span class="l"></span><span class="t"></span><span class="b"></span><span class="br"></span><span class="bl"></span><span class="tl"></span><img class="imgi"></div><div class="box draggable box0"><a href="javascript:" class="img-remove">x</a><span class="r"></span><span class="l"></span><span class="t"></span><span class="b"></span><span class="br"></span><span class="bl"></span><span class="tl"></span><img class="imgi"></div><div class="section ui-widget-content box0"><a href="javascript:" class="img-remove">x</a><input class="upload" id="upload1" type="file" onchange=onUpload2_0(this.files[0])><div class="preview" id="preview1"></div></div><div class="section ui-widget-content box0"><a href="javascript:" class="img-remove">x</a><input class="upload" id="upload1" type="file" onchange=onUpload2_1(this.files[0])><div class="preview" id="preview2"></div></div><div class="section ui-widget-content box0"><a href="javascript:" class="img-remove">x</a><input class="upload" id="upload1" type="file" onchange=onUpload2_2(this.files[0])><div class="preview" id="preview3"></div></div><div class="section ui-widget-content box0"><a href="javascript:" class="img-remove">x</a><input class="upload" id="upload1" type="file" onchange=onUpload2_3(this.files[0])><div class="preview" id="preview4"></div></div><div class="section ui-widget-content box0"><a href="javascript:" class="img-remove">x</a><input class="upload" id="upload1" type="file" onchange=onUpload2_4(this.files[0])><div class="preview" id="preview5"></div></div><div class="section ui-widget-content box0"><a href="javascript:" class="img-remove">x</a><input class="upload" id="upload1" type="file" onchange=onUpload2_5(this.files[0])><div class="preview" id="preview6"></div></div>';
        var newOutbox = '<div class="outbox" id="out' + pptCount + '" style="border:1.8px dashed #C0C0C0;">' + content + '</div>';
        $(document.body).append(newOutbox);
        //初始化图片记录变量为0
        imgCount[pptCount - 1] = 0;
        //初始化文本记录变量为0
        textCount[pptCount - 1] = 0;
        //初始化视频框记录变量为0
        videoBoxCount[pptCount - 1] = 0;
        //初始化视频记录变量为0
        videoCount[pptCount - 1] = 0;
        //初始化视频记录变量为0
        is_exist[pptCount - 1] = true;
        //添加点击事件，实现选中指定ppt页面
        $("#menu").on("click", "#ppt" + num, function () {
            //记录当前选中ppt页数，
            current_id = num;
            for (var i = 0; i < pptCount; i++) {
                if (i == num - 1) {
                    $(".outbox")[i].style.display = "inline";
                }
                else {
                    $(".outbox")[i].style.display = "none";
                }
            }
            //点击事件，删除当前ppt页(未启用)

            document.title = '编辑页面  第' + num + '页';

        });





        var mark = 1, tp = 2;
        var t = 2;
        var T, R, temp;
        for (var j = 0; j < 6; ++j) {
            var oDiv0 = document.getElementsByClassName('box')[j + (num - 1) * 6];
            oDiv0.style.width = '200px';
            var imgi = document.getElementsByClassName('imgi');
            var aSpan = oDiv0.getElementsByTagName('span');
            for (var i = 0; i < aSpan.length; i++) {
                dragFn(aSpan[i], oDiv0);
            }
            $(function () {
                $(".draggable").draggable({ containment: "parent", cancel: "span" });
            });
            $(".section").draggable({ containment: "parent" });
            $(".section").resizable();
            $(".img-remove").click(function () {
                $(this.parentNode).remove();
            });
        }
        $(".box0").click(function () {
            this.style.zIndex = t;
            t++;
        });
    });

    //放缩功能？
    function dragFn(obj, oDiv) {
        obj.onmousedown = function (ev) {
            var oEv = ev || event;
            var oldWidth = oDiv.offsetWidth;
            var oldHeight = oDiv.offsetHeight;
            var oldX = oEv.clientX;
            var oldY = oEv.clientY;
            var oldLeft = oDiv.offsetLeft;
            var oldTop = oDiv.offsetTop;

            document.onmousemove = function (ev) {
                var oEv = ev || event;
                if (obj.className == 'tl') {
                    oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
                    oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
                    oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
                    oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
                }
                else if (obj.className == 'bl') {
                    oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
                    oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
                    oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
                    oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
                }
                else if (obj.className == 'tr') {
                    oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
                    oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
                    oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
                    oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
                }
                else if (obj.className == 'br') {
                    oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
                    oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
                    oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
                    oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
                }
                else if (obj.className == 't') {
                    oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
                    oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';
                }
                else if (obj.className == 'b') {
                    oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
                    oDiv.style.bottom = oldTop - (oEv.clientY + oldY) + 'px';
                }
                else if (obj.className == 'l') {
                    oDiv.style.height = oldHeight + 'px';
                    oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
                    oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
                }
                else if (obj.className == 'r') {
                    oDiv.style.height = oldHeight + 'px';
                    oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
                    oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
                }
            };

            document.onmouseup = function () {
                document.onmousemove = null;
            };
            return false;
        };
    }

    //设置点击要素后，要素向最顶层浮动
    $(".box0").click(function () {
        this.style.zIndex = t;
        t++;
    });
};

var tmpi = 0;
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
        vars[decodeURI(hash[0])] = decodeURI(hash[1]);
    }
    return vars;
}

//记录当前放映的ppt编号
var current_show, is_show;
$(document).ready(function () {
    articleId = getUrlVars()["id"];
    art_title = getUrlVars()["title"];
    console.log(art_title);
    $("#get").click();
    //开始放映
    $("#play_start").on("click", function () {
        var ppttime = prompt("请输入放映延时(ms)");
        // window.open("放映.html?id=" + articleId + "&time=" + ppttime+"&title="+art_title,"_blank");
        window.open(location.origin + '/play_start?id=' + articleId + "&time=" + ppttime + "&title=" + art_title, '_blank')
    });
});
